<template>
  <div class="home">
    <div>基础案例</div>
    <!-- 从vuex中获取state数据 -->
    <div>{{$store.state.num}}</div>
    <!-- 基于计算属性进行处理 -->
    <div>{{myCount}}</div>
    <div>{{num}}</div>
    <div>{{total}}</div>
    <div>
      <!-- <button @click='handleClick1(1)'>点击1</button> -->
      <!-- <button @click='handleClick2(1)'>点击2</button> -->
      <button @click='updateNum(1)'>点击3</button>
      <button @click='updateTotal(1)'>点击4</button>
    </div>
  </div>
</template>

<script>
// Vuex专门引入了一个函数简化状态获取操作
// mapMutations可以把mutation的方法直接映射Wie函数即可
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      count: 10
    }
  },
  computed: {
    myCount () {
      return this.count + 100
    },
    ...mapState(['num', 'total'])
  },
  // 1. mapMutations参数是一个对象，对象中可以映射函数名称
  // methods: mapMutations({
  //   handleClick1: 'updateNum',
  //   handleClick2: 'updateTotal'
  // })
  // 2. 如果mutation的名称和函数名称一致的话，可以直接用数组映射
  // methods: mapMutations(['updateNum', 'updateTotal'])
  // 3. 如果本来就有函数，如何结合映射的mutation一块使用？
  methods: {
    showInfo () {
      console.log('hello')
    },
    // 最原始写法
    // updateNum (param) {
    //   // 点击触发该函数后要再次触发mutation的
    //   this.$store.commit('updateNum', param)
    // }
    ...mapMutations(['updateNum', 'updateTotal'])
  }
}
</script>
